<template>
    <div class="content">
        <div class="header">后台管理系统</div>
        <div class="home-content">
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                <el-sub-menu v-for="(item, index) in  menus" :key="index" :index="index" active-color="#409eff">
                    <template #title>
                        <span>{{ item.title }}</span>
                    </template>
                    <el-menu-item-group v-for="(itm, idx) in item.children" :key="idx + 'aa'" :index="index + '-' + idx"
                        @click="gotoSubPage(itm.url)">
                        <el-menu-item :index="index + '_' + idx">{{ itm.title }}</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </el-menu>
        </div>
        <div class="subMenu">
            <router-view></router-view>
        </div>
    </div>
</template>
<script setup lang="ts">
import router from '@/router'
import { RouterView } from 'vue-router';
import { ref } from 'vue';
import { ElMenu } from 'element-plus';


const menus = ref([
    {
        title: "首页", url: "/",
        children: []
    },
    {
        title: "用户",
        url: "",
        children: [
            { title: "用户列表", url: "/user" }
        ]
    },
    {
        title: "文章管理",
        url: "",
        children: [
            { title: "文章列表", url: "/article" }
        ]
    },
    {
        title: "分类管理",
        url: "",
        children: [
            { title: "分类列表", url: "/cate" }
        ]
    },
])

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
}

const gotoSubPage = (url: string) => {
    console.log("r", url)
    router.push(url);
}

</script>
<style scoped>
.content {
    padding: 10px 0;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background: #f1f1f1;
    display: flex;
    flex-direction: column;
}

.header {
    height: 60px;
    margin: 10px 0;
    padding-left: 10px;
    background: white;
    line-height: 60px;
}

.subMenu {

    background: white;
    position: absolute;
    top: 90px;
    left: 240px;
    right: 0;
    min-height: calc(100% - 90px );
    padding: 10px 20px;
    box-sizing: border-box;
}

.el-menu-vertical-demo {

    border-radius: 6px;

}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 700px;
}


</style>